<template>
  <AutoDetail
      :mode="mode"
      :data="userData"
      :config="fields"
      :loading="loading"
      @submit="onSubmit"
      @cancel="onCancel"
  />
</template>

<script>
import AutoDetail from '@/components/AutoDetail/index.vue'

export default {
  components: {AutoDetail},
  data() {
    return {
      mode: this.$route.query.mode || 'view', // 或 route.meta
      userData: {},
      loading: true,
      fields: [
        {label: '用户名', key: 'username', type: 'text', required: true},
        {label: '邮箱', key: 'email', type: 'email'},
        {label: '角色', key: 'role', type: 'select', options: ['管理员', '用户']},
        {label: '注册时间', key: 'createdAt', type: 'date', readonly: true},
      ]
    }
  },
  created() {
    if (this.mode !== 'create') {
      // fetch user detail
      const id = this.$route.params.id
      this.getUser(id)
    } else {
      this.loading = false
    }
  },
  methods: {
    getUser(id) {
      this.loading = true
      // 假设请求数据
      setTimeout(() => {
        this.userData = {
          username: 'jack',
          email: 'jack@example.com',
          role: '管理员',
          createdAt: '2023-01-01'
        }
        this.loading = false
      }, 500)
    },
    onSubmit(data) {
      console.log('提交：', data)
      // 请求保存逻辑...
    },
    onCancel() {
      this.$router.back()
    }
  }
}
</script>
